<template>
	<view class="message1" v-if="loadingData">
		<view class="list" v-for="(v, k) in listData" :key= "k" @tap="getDetails(v.id)">
			<view class="top">
				<view class="left">公告消息</view>
				<view class="right">{{v.create_time}}</view>
			</view>
			<view class="bottom row2">{{v.title}}</view>
		</view>
		<noData text="暂时没有数据" v-if="listData.length == 0"></noData>
		<!-- <view v-if="listData.length == 0" style="padding: 20rpx 0;">
			<u-empty  text="没有更多了" mode="list"></u-empty>
		</view> -->
		<view style="padding: 14rpx 0;">
			<u-loadmore v-if="last_page > 1" :status="status" :icon-type="iconType" :load-text="loadText" />
		</view>
	</view>
</template>

<script>
	import noData from '@/components/xs-components/noData.vue';
	export default {
		data() {
			return {
				listData: [],
				refresh: true,
				loadingData: false,
				page: 1,
				last_page: 1,
				status: 'loadmore',
				iconType: 'flower',
				loadText: {
					loadmore: '轻轻上拉',
					loading: '努力加载中',
					nomore: '没有更多了'
				}
			}
		},
		components: {
			noData
		},
		onLoad() {
			// console.log(this.letterList)
		},
		onShow() {
			uni.showLoading({
				title: '加载中'
			})
			this.messageInfo()
		},
		// 下拉刷新
		onPullDownRefresh() {
			this.page = 1
			this.refresh = true
			this.messageInfo()
		},
		// 上拉加载
		onReachBottom() {
			if(this.page >= this.last_page) return ;
			this.status = 'loading';
			this.page ++;
			this.refresh = false
			setTimeout(() => {
				
				if(this.page >= this.last_page) this.status = 'nomore';
				else this.status = 'loading';
				this.messageInfo()
			},500)
		},
		methods: {
			messageInfo() {
				this.$api.post(global.apiUrls.getOperationGetSystemMsgList, {
					page: this.page,
					msgtype: 1
				}).then(res => {
					uni.hideLoading()
					uni.stopPullDownRefresh()
					this.loadingData = true
					if (res.data.code == 1) {
						this.last_page = res.data.data.last_page
						if (this.refresh) {
							this.listData = res.data.data.data
						} else {
							this.listData = this.listData.concat(res.data.data.data)
						}
						
					} else {
						this.$message.info(res.data.msg)
					}
				})
			},
			getDetails(id) {
				uni.navigateTo({
					url: '/pages/home/news/newsDetails?id=' + id
				})
			}
		}
	}
</script>

<style lang="scss" scoped>

	page {
		background: #F8F8F8;
		color: #333333;
		font-size: 32rpx;
	}
	.message1 {
		padding: 20rpx 24rpx;
		.list {
			padding: 24rpx;
			border-radius: 16rpx;
			background: #FFFFFF;
			margin-bottom: 20rpx;
			.top {
				margin-bottom: 32rpx;
				display: flex;
				.left {
					width: 50%;
				}
				.right {
					width: 50%;
					text-align: right;
					font-size: 22rpx;
					color: #999999;
					padding-top: 10rpx;
				}
			}
			.bottom {
				font-size: 24rpx;
				font-family: PingFang SC;
				font-weight: 400;
				line-height: 36rpx;
				color: #999999;
			}
		}
	}

</style>
